<template>
  <div class="common-layout">
    <el-container class="lay-container">
      <CommonAside></CommonAside>

      <el-container>
        <CommonHeader></CommonHeader>

        <CommonTag></CommonTag>

        <el-main class="right-main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import CommonHeader from "@/components/CommonHeader";
import CommonAside from "@/components/CommonAside";
import CommonTag from "@/components/CommonTag";

export default {
  name: "AppMain",
  components: {CommonTag, CommonAside, CommonHeader},
}
</script>

<style lang="less" scoped>
.el-container {
  flex-wrap: wrap;
  align-items: flex-start;
  height: 100%;
}

.common-layout {
  .lay-container {
    flex-wrap: nowrap;

    .right-main {
      height: calc(100% - 124px) !important;
    }
  }

  height: 100%;

  & > .el-container {
    height: 100%;

    & > .el-aside {
      height: 100%;
      background: #545c64;
    }
  }
}
</style>